import {Component, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {NzUploadFile} from 'ng-zorro-antd/upload';
import {ManageService} from '../manage.service';

@Component({
  selector: 'app-image-manage',
  templateUrl: './image-manage.component.html',
  styleUrls: ['./image-manage.component.scss']
})
export class ImageManageComponent implements OnInit {
  query: any = {
    name: null,
    category: null,
    status: null,
    date: null,
  };
  queryCategoryOptions: any[] = [
    {id: '23123', name: '分类1'},
    {id: '23123253', name: '分类11'},
  ];
  listOfData: any = {
    current: 1,
    total: 0,
    size: 20,
    records: []
  };
  checked = false;
  indeterminate = false;
  modal: any = {
    modalVisible: false,
    isAdd: true,
  };
  form: any = {
    name: null,
    category: null,
    no: null,
    status: null,
    remark: null,
  };

  goodsDetailImg: any = {
    url: null,
    loading: false,
    fileList: []
  };

  constructor(
    private manageService: ManageService
  ) {
  }

  ngOnInit(): void {
    this.queryTableList();
  }

  /**
   * page number 必须 分页
   * pageSize number 必须 分页大小
   * img string 非必须 图片
   * typeId string 非必须 分类id
   * status string 非必须 状态 0-禁用，1-启用，2-删除
   * createTime string 非必须 创建结束时间
   * endTime string 非必须 创建开始时间
   */
  queryTableList() {
    this.manageService.httpPost(this.manageService.serviceUrl.imgList,
      {
        page: this.listOfData.current,
        pageSize: this.listOfData.size,
        img: this.query.name,
        typeId: this.query.category?.join(','),
        status: this.query.status,
        createTime: this.query.date?.toISOString().match(/\d{4}-\d{2}-\d{2}/)[0]
      }).then((res: any) => {
      if (res.code === 0) {
        this.listOfData.records = res.data.records;
        this.listOfData.total = res.data.total;
      }
    });
  }

  onPageIndexChange(index: number) {
    console.log(index);
    this.query.current = index;
    // this.checked = false;
    this.queryTableList();
  }

  onPageSizeChange(size: number) {
    this.listOfData.size = size;
    this.queryTableList();
  }


  appendImg() {
    console.log('添加图片');
    this.modal.modalVisible = true;
    this.modal.isAdd = true;
  }

  edit(data: any) {
    console.log(data, '编辑');
    this.modal.modalVisible = true;
    this.modal.isAdd = false;
  }

  // 模态框取消按钮监听
  handleModalCancel() {
    this.modal.modalVisible = false;
    this.resetFormData();
  }

  // 模态框确认按钮监听
  handleModalOk() {
    this.modal.modalVisible = false;
    this.resetFormData();
  }

  // 重置数据
  resetFormData() {
    this.form = {
      name: '',
      status: '',
    };
  }

  deleteRow(id: any) {
    console.log('删除行', id);
  }

  customRequest = () => new Subscription();

  /*
  * 文件改变
  * */
  handleChange(info: { file: NzUploadFile }, obj: any): void {
    obj.fileList = [info.file.originFileObj];
    this.getBase64(info.file.originFileObj, img => {
      obj.url = img;
    });
  }

  /*
  * file转base64*/
  private getBase64(img: any, callback: (img: string) => void): void {
    const reader = new FileReader();
    // @ts-ignore
    reader.addEventListener('load', () => callback(reader.result.toString()));
    reader.readAsDataURL(img);
  }
}
